<template>
    <div class="gifts">
        <div class="search_fiexd">
            <yd-slider autoplay="3000">
                <yd-slider-item v-for="(item,index) in object" :key="index">
                    <a :href="item.advUrl">
                        <img style="min-height:2.2rem" :src="imgUrl+item.advContent">
                    </a>
                </yd-slider-item>
            </yd-slider>
            <!--选项卡  -->
            <div class="gifts_list">
                <ul class="btn_list">
                    <li v-for="(item,index) in activeName" :key="index" :class="{active:isActive[index]}" @click="activegifts(index)">
                        {{item.title}}
                    </li>
                </ul>
                <div class="giftsYuan">
                    <yd-icon name="love" custom slot="icon"></yd-icon>
                </div>
            </div>
        </div>
        <div class="img_btn" v-show="isActive[0]">
            <div v-for="(item,index) in activeJw" :key="index">
                <a :href="item.advUrl">
                    <img :src="imgUrl+item.advContent">
                </a>
            </div>
        </div>
        <div class="img_btn" v-show="isActive[1]">
            <div v-for="(item,index) in activeDx" :key="index">
                <a :href="item.advUrl">
                    <img :src="imgUrl+item.advContent">
                </a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'gifts',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            searchValue: '',
            isActive: [
                true
            ],
            toolbarsList: [],
            activeName: [
                {
                    title: '按价格选'
                },
                {
                    title: '按对象选'
                }
            ],
            //切换
            itemList: 0,
            object: [],
            activeJw: [],
            activeDx: []
        }
    },
    created: function() {
        if (this.$route.query.item) {
            let index = this.$route.query.item || 0;
            this.isActive = [];
            this.$set(this.isActive, index, true);
        }
        this.init(7);
        //按照价格送
        this.init(8);
        //按照对象送
        this.init(9);
    },
    methods: {
        init(item) {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'adv/list?apId=' + item)
                .then((response) => {
                    if (response.status == 200) {
                        if (item == 7) {
                            for (var i = 0; i < response.data.object.length; i++) {
                                var advUrl = response.data.object[i].advUrl;
                                if (advUrl == '') {
                                    response.data.object[i].advUrl = 'javascript:;'
                                }
                            }
                            this.object = response.data.object;
                        } else if (item == 8) {
                            for (var i = 0; i < response.data.object.length; i++) {
                                var advUrl = response.data.object[i].advUrl;
                                if (advUrl == '') {
                                    response.data.object[i].advUrl = 'javascript:;'
                                }
                            }
                            this.activeJw = response.data.object;
                        } else if (item == 9) {
                            for (var i = 0; i < response.data.object.length; i++) {
                                var advUrl = response.data.object[i].advUrl;
                                if (advUrl == '') {
                                    response.data.object[i].advUrl = 'javascript:;'
                                }
                            }
                            this.activeDx = response.data.object;
                        }
                    }
                })
        },
        activegifts(index) {
            this.itemList = index;
            this.isActive = [];
            this.$set(this.isActive, index, true);
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gifts {
    min-height: 101%;
    padding-top: 3.4rem;
}

.img_btn {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 0.25rem;
    overflow: hidden;
    padding-bottom: 20px;
}

.img_btn>div {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.2rem 0;
    overflow: hidden;
    border-radius: 5px;
}

.img_btn img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 2rem;
}

.gifts .search {
    width: 7rem;
    position: absolute;
    left: 50%;
    top: 0.2rem;
    margin-left: -3.5rem;
    opacity: 0.7;
    font-size: 14px;
    border: 0;
    z-index: 9;
}

.search_fiexd {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
}

.gifts_list {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 3px 10px #bbb;
}

.btn_list {
    width: 80%;
    height: 0.8rem;
    font-size: 14px;
    line-height: 0.85rem;
    margin: 0.2rem auto;
    color: #B19E76;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    background: #F2F2F2;
}

.btn_list li {
    width: 50%;
    height: 100%;
    float: left;
    color: #FB6C68;
}

.btn_list li.active {
    color: #fff;
    background: #FB6C68;
}

.giftsYuan {
    background: #fff;
    width: 0.8rem;
    position: absolute;
    left: 50%;
    text-align: center;
    line-height: 0.8rem;
    top: 0.2rem;
    color: #FB6C68;
    margin-left: -0.4rem;
    height: 0.8rem;
    border-radius: 50%;
    overflow: hidden;
}
</style>
<style>
.gifts .yd-slider {
    height: 2.2rem;
}
</style>